<template>
  <div class="mod-poapweb__poapadvertisement">
    <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()">
      <!-- <el-form-item>
        <el-input v-model="state.dataForm.title" placeholder="广告名称" clearable></el-input>
      </el-form-item> -->
      <el-form-item>
        <el-button @click="state.getDataList()">{{ $t("query") }}</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="info" @click="state.exportHandle()">{{ $t("export") }}</el-button>
      </el-form-item>
      <el-form-item>
        <el-button v-if="state.hasPermission('poapweb:poapadvertisement:save')" type="primary"
          @click="addOrUpdateHandle()">{{ $t("add") }}</el-button>
      </el-form-item>
      <el-form-item>
        <el-button v-if="state.hasPermission('poapweb:poapadvertisement:delete')" type="danger"
          @click="state.deleteHandle()">{{ $t("deleteBatch") }}</el-button>
      </el-form-item>
    </el-form>
    <div class="mid">
      <div v-for="(item, index) in state.dataList" :key="index" class="advertise">
        <div class="left">
          <img :src="item.url" @click="imgShow(item)">
        </div>
        <div class="right">
          <div class="big-title">
            <div class="title">{{ item.title }}</div>
            <div class="status">
              <el-tag v-if="item.status === 0" size="small" type="danger">{{ $t("user.status0") }}</el-tag>
              <el-tag v-else size="small" type="success">{{ $t("user.status1") }}</el-tag>
            </div>
          </div>
          <div class="partner">合作商:&nbsp;{{ item.partner }}</div>
          <div class="data">
            <div class="effectiveDate">生效日期:&nbsp;{{ item.effectiveDate }}</div>
            <div class="expiringDate">失效日期:&nbsp;{{ item.expiringDate }}</div>
          </div>
          <div class="operation">
            <el-button @click="addOrUpdateHandle(item.id)" class="my-button" type="primary">{{ $t("update")
              }}</el-button>
            <el-button @click="state.deleteHandle(item.id)" class="my-button" type="primary">{{ $t("delete")
              }}</el-button>
          </div>
        </div>
      </div>
    </div>
    <el-pagination :current-page="state.page" :page-sizes="[3, 5, 10, 20]" :page-size="state.limit" :total="state.total"
      layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle"
      @current-change="state.pageCurrentChangeHandle"> </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update :key="addKey" ref="addOrUpdateRef" @refreshDataList="state.getDataList"></add-or-update>
  </div>
  <el-dialog v-model="imgVisible" width="50%">
    <img :src="imgUrl" style="width: 100%;height: 100%;">
  </el-dialog>
</template>
<script lang="ts" setup>
import useView from "@/hooks/useView";
import { nextTick, reactive, ref, toRefs, watch } from "vue";
import AddOrUpdate from "./poapadvertisement-add-or-update.vue";
import AdvertiseUpload from "./advertise-upload.vue";
const imgVisible = ref(false);
const imgUrl = ref("");

const imgShow = (row: any) => {
  // console.log(typeof row);
  imgVisible.value = true;
  imgUrl.value = row.url
}

const view = reactive({
  getDataListURL: "/poapweb/poapadvertisement/page",
  getDataListIsPage: true,
  exportURL: "/poapweb/poapadvertisement/export",
  deleteURL: "/poapweb/poapadvertisement",
  deleteIsBatch: true,
  dataForm: {}
});

const state = reactive({ ...useView(view), ...toRefs(view) });

const addKey = ref(0);
const addOrUpdateRef = ref();
const addOrUpdateHandle = (id?: number) => {
  addKey.value++;
  nextTick(() => {
    addOrUpdateRef.value.init(id);
  });
};
</script>
<style scoped>
@import "@/styles/advertise.less";
</style>
